<template>
  <div>
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 2px solid #cccccc; padding-bottom: 10px">
      <span style="font-size: 17px; color: #333333;">箱格详情</span>
      <i class="el-icon-back" @click="handleBack()" style="font-size: 18px; color: deepskyblue; cursor: pointer;">返回</i>
    </div>
    <div style="display: flex;width: 100%;">
      <div style="width: 300px;height: 200px;background-color: #1890ff"/>
      <div style="padding-left: 75px">
        <table>
          <tr align="left" style="height:70px">
            <td style="width: 100px;">柜机ID</td>
            <td style="width: 300px;">
              {{ box.machineId.toString().padStart(9, '0') }}
            </td>
            <td style="width: 100px;">箱格序号</td>
            <td style="width: 300px;">{{ box.boxNumber }}</td>
            <td style="width: 100px;">宽深高/cm</td>
            <td style="width: 300px;">
              {{ box.width }}x{{ box.depth }}x{{ box.height }}
            </td>
          </tr>
          <tr align="left" style="height:50px">
            <td style="width: 100px;">柜机编码</td>
            <td style="width: 300px;">{{ box.machineCode }}</td>
            <td style="width: 100px;">箱格位置</td>
            <td style="width: 300px;">{{ box.position }}</td>
            <td style="width: 100px;">存藏类型</td>
            <td style="width: 300px;">
              {{ box.storageType === 0 ? '常温' : box.storageType === 1 ? '冷藏' : '' }}
            </td>
          </tr>
          <tr align="left" style="height:50px">
            <td style="width: 100px;">设备型号</td>
            <td style="width: 300px;">{{ box.isModel }}</td>
            <td style="width: 100px;">箱格类型</td>
            <td style="width: 300px;">
              {{ box.isType === 0 ? '小箱' : box.isType === 1 ? '中箱' : box.isType === 2 ? '大箱' : ''  }}
            </td>
            <td style="width: 100px;">温度/℃</td>
            <td style="width: 300px;">
              {{ box.temperature === null ? '常温' : box.temperature }}
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div style="display: flex; align-items: center; margin-left: 10px; width: 1300px; height: 40px; margin-top:20px">
      <el-form :model="searchForm" ref="searchForm" class="demo-searchForm" style="display: flex; align-items: center;">
        <el-form-item prop="isState" style="margin-right: 10px;">
          <el-select v-model="searchForm.boxState" @change="selectList()">
            <el-option label="箱门状态" value=""></el-option>
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isState" style="margin-right: 10px;">
          <el-date-picker
              @change="selectList()"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div v-if="tableData.length !== 0">
        <el-table
            :data="tableData"
            style="width: 100%"
        >
          <el-table-column label="开箱时间" prop="openTime" :formatter="formatDateTime"/>
          <el-table-column label="关箱时间" prop="closeTime" :formatter="formatDateTime"/>
          <el-table-column label="类型" prop="useType">
            <template slot-scope="scope">
              {{ scope.row.useType === 1 ? '取件' : scope.row.useType === 2 ? '派件' : scope.row.useType === 3 ? '寄件' : '收件'}}
            </template>
          </el-table-column>
          <el-table-column label="操作人" prop="useUsername"/>
          <el-table-column label="手机号码" prop="phone"/>
          <el-table-column label="时长">
            <template slot-scope="scope" v-if="scope.row.closeTime !== null">
              {{formatDuration( scope.row.closeTime , scope.row.openTime) }}
            </template>
          </el-table-column>
          <el-table-column label="箱门状态" prop="boxState">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.boxState === 0" type="success">正常</el-tag>
              <el-tag v-else-if="scope.row.boxState === 1" type="danger">异常</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchForm.pageNum"
              :page-sizes="[2, 4, 6, 8]"
              :page-size="searchForm.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
      <div v-if="tableData.length === 0">
        <el-empty :image-size="200"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { findBoxById,findBoxRecordList } from "@/api/machine/VendingMachine";

export default {
  name: "BoxDetail",
  data() {
    return {
      total: 0,
      id:'',
      box:{
        machineId:''
      },
      value1:[],
      searchForm: {
        boxId:'',
        boxState: '',
        pageSize: 2,
        pageNum: 1,
        startDate:'',
        endDate:''
      },
      tableData:[]
    }
  },
  methods: {
    /*规范时间格式*/
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    formatDateTime(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    /*动态分页*/
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.selectList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.selectList();
    },
    /*返回按钮*/
    handleBack(){
      this.$router.go(-1);
    },
    /*页面初始化*/
    init(){
      findBoxById(this.id).then(res => {
        if (res.code === 200) {
          this.box = res.data;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    /*搜索 表格展示*/
    selectList() {
      this.searchForm.boxId = this.id;
      if (this.value1 === null) {
        this.searchForm.startDate = '';
        this.searchForm.endDate = '';
      }else {
        const dateStrings = this.value1.map(date => {
          return date instanceof Date ? date.toLocaleDateString() : '';
        });
        this.searchForm.startDate = dateStrings[0];
        this.searchForm.endDate = dateStrings[1];
      }
      findBoxRecordList(this.searchForm).then(response => {
        if (response.code === 200) {
          console.log(response);
          this.tableData = response.data;
          this.total = response.total;
        }
      });
    },
    /*计算开门时长*/
    formatDuration(closeTime, openTime) {
      const closeDateTime = new Date(closeTime);
      const openDateTime = new Date(openTime);
      const duration = Math.abs(closeDateTime - openDateTime); // 毫秒为单位的时间差

      const days = Math.floor(duration / (1000 * 60 * 60 * 24)); // 天
      const hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 小时
      const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60)); // 分钟
      const seconds = Math.floor((duration % (1000 * 60)) / 1000); // 秒

      // 构建返回的字符串，对于0值不显示
      let result = '';
      if (days > 0) result += `${days}天`;
      if (hours > 0) result += `${hours}小时`;
      if (minutes > 0) result += `${minutes}分`;
      if (seconds > 0 || result === '') result += `${seconds}秒`; // 如果秒数为0，且没有其他时间单位，则显示0秒

      return result;
    },
  },
  created() {
  },
  mounted() {
    this.id = this.$route.query.id;
    this.init();
    this.selectList();
  }
}
</script>

<style scoped>

</style>